<template>
  <div class="boxLayout">
    <div class="liveBox">
      <p class="rightTie">包含这首歌的歌单</p>
      <ul class="LiveUserAvatarUrlBox">
        <router-link
          v-for="item in beSimilarSongSheetList"
          :key="item.userId"
          tag="li"
          :to="{ name: 'songsheetdetail', query: { id: item.id } }"
        >
          <img :src="item.coverImgUrl" class="headPortrait" />
          <div class="beSimilarBox">
            <p class="musicName">{{ item.name }}</p>
            <p class="musicAuthor">by {{ item.creator.nickname }}</p>
          </div>
        </router-link>
      </ul>
    </div>
    <div class="relevantBox">
      <p class="rightTie">相似歌曲</p>
      <ul>
        <router-link
          tag="li"
          v-for="item in beSimilarMusicList"
          :key="item.id"
          class="relevantItem"
          :to="{ name: 'musicdetail', query: { id: item.id } }"
        >
          <div class="itemRightBox">
            <p class="title">{{ item.name }}</p>
            <p class="nickname">
              <span v-for="obj in item.artists" :key="obj.id"
                >{{ obj.name }}
              </span>
            </p>
          </div>
          <div>
            <span class="playBtn"></span>
            <span class="addMusicBtn"></span>
          </div>
        </router-link>
      </ul>
    </div>
    <DownloadApp />
  </div>
</template>

<script>
import DownloadApp from "@/components/DownloadApp";
import { beSimilarMusic, beSimilarSongSheet } from "@/api";
export default {
  data() {
    return {
      beSimilarSongSheetList: [], //包含这首歌的歌单
      beSimilarMusicList: [], //相似歌曲
    };
  },
  components: {
    DownloadApp,
  },
  created() {
    this.getBeSimilarMusic();
    this.getDeSimilarSongSheet();
  },
  methods: {
    getBeSimilarMusic() {
      beSimilarMusic({ id: this.$route.query.id, limit: 8 }).then((res) => {
        // console.log(res);
        this.beSimilarMusicList = res.songs;
      });
    },
    getDeSimilarSongSheet() {
      beSimilarSongSheet({ id: this.$route.query.id }).then((res) => {
        // console.log(res);
        this.beSimilarSongSheetList = res.playlists;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.boxLayout {
  padding: 20px 40px 40px 30px;
  .rightTie {
    color: #333;
    height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    font-weight: 700;
  }
  .liveBox {
    .LiveUserAvatarUrlBox {
      li {
        margin-bottom: 15px;
        display: flex;
        .headPortrait {
          width: 50px;
          height: 50px;
          cursor: pointer;
        }
        .beSimilarBox {
          margin-left: 10px;
          flex: 1;
          overflow: hidden;
          .musicName {
            color: #000;
            font-size: 14px;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 24px;
          }
          .musicAuthor {
            margin: 0 2px 0 4px;
            color: #666;
            overflow: hidden;
            line-height: 24px;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }
        }
      }
    }
  }
  .relevantBox {
    margin: 35px 0;
    .relevantItem {
      display: flex;
      margin-top: 10px;
      justify-content: space-between;
      align-items: center;
      .itemRightBox {
        font-size: 12px;
        overflow: hidden;
        color: #000;
        .title {
          cursor: pointer;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .nickname {
          color: #999;
          cursor: pointer;
          font-size: 12px;
        }
      }
      .playBtn {
        display: inline-block;
        width: 10px;
        height: 11px;
        background: url("./../../assets/imges/iconOne.png") no-repeat -69px -455px;
        margin-right: 16px;
      }
      .addMusicBtn {
        display: inline-block;
        width: 10px;
        height: 11px;
        background: url("./../../assets/imges/iconOne.png") no-repeat -87px -454px;
      }
    }
  }
}
</style>